<template>
  <div>
    <!-- el-tree默认选中
                node-key="每一个数据中的唯一字段名"
                default-checked-keys=[选中项node-key设置的字段对应的值]
                check-strictly：父子选择不关联，默认是false(关联)

                methods:
                   设置选中项，它会重置整个选中再选中设置的项
                   setCheckedKeys([需要勾选的项])   this.$refs.el-tree的ref值.setCheckedKeys([...])
                   获取选中项
                   getCheckedKeys()   this.$refs.el-tree的ref值.getCheckedKeys()

    -->
    <button @click="$refs.tree.setCheckedKeys([])">清空勾选</button>
    <button @click="$refs.tree.setCheckedKeys([3])">选中广州</button>
    <button @click="getClick">获取选中项</button>
    <el-tree ref="tree" :data="list" show-checkbox node-key="id" :default-checked-keys="[1,3]" check-strictly />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          label: '深圳',
          id: 1,
          children: [
            {
              label: '宝安',
              id: 2
            },
            {
              label: '南山',
              id: 4
            }
          ]
        },
        {
          label: '广州',
          id: 3
        }
      ]
    }
  },
  methods: {
    getClick() {
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>
<style>
</style>
